<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>admin</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/font-awesome.min93e3.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/style.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/login.min.css">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
    <style>
        body {
            margin: 50px 0;
            text-align: center;
            font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }

        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }

        .btn {
            border: 1px solid #cccccc;
            border-radius: 2px;
            width: 100px;
            height: 40px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
        }

        .btn:hover {
            background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
        }

        #captcha {
            width: 300px;
            display: inline-block;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }

        #notice {
            color: red;
        }

        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        #wait {
            text-align: left;
            color: #666;
            margin: 0;
        }
    </style>
</head>

<body class="signin">
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7"></div>
        <div class="col-sm-5">
            <form id="form_login" method="post"  onsubmit="return false;">
                <h4 class="text-center text-navy">后台管理系统</h4>
                <p id="notice-msg" style="color:red;text-align:center;"></p>
                <input type="text" name="user_login" class="form-control uname" placeholder="用户名" />
                <input type="password" name="user_pass" class="form-control pword m-b" placeholder="密码"/>
                <input type="hidden" name="sign" value="{$data}" class="form-control pword m-b" placeholder=""/>
                <!--<div class="col-xs-7 form_vertify">
                    <input type="text" name="vertify" id="vertify" class="form-control vertify m-b">
                </div>-->
                <!--<div class="col-xs-5 form_vertify_img">
                    <img src="{:url('admin/index/vertify')}" alt="验证码" id="form_vertify_img" class="form-control m-b" onclick="refreshVertify();" >
                </div>-->
                <div>
                    <div id="captcha">
                        <!--<p id="wait" class="show">正在加载验证码......</p>-->
                    </div>
                </div>
                <br>
                <p id="notice" class="hide">请先完成验证</p>
                <input class="btn" id="submit" type="submit" value="登录">
            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="text-center">
        </div>
    </div>
</div>
<js href="/static/js/admin/jquery.min.js"/>
</body>
</html>
<!-- 注意，验证码本身是不需要 jquery 库，此处使用 jquery 仅为了在 demo 使用，减少代码量 -->
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<!-- 引入 极验官方gt.js，使用其中提供的 initGeetest 初始化函数 -->
<script src="https://static.geetest.com/static/tools/gt.js"></script>
<script type="text/javascript">
    $.ajax({
        url: "{:url('admin/Index/geetest_show_verify')}", // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 初始化参数
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "float", // 产品形式，包括：float，popup
                width: "100%"
            }, handler);
        }
    });

    var handler = function (captchaObj) {
        $("#submit").click(function (e) {
            var result = captchaObj.getValidate();
            if (!result) {
                $("#notice").show();
                setTimeout(function () {
                    $("#notice").hide();
                }, 2000);
                e.preventDefault();
            }
            if($.trim($("input[name=user_login]").val())=='') {

                $("#notice-msg").text('请输入用户名');

                return false;
            }

            if($.trim($("input[name=user_pass]").val())=='') {

                $("#notice-msg").text('请输入密码');

                return false;
            }

            if($.trim($("input[name=geetest_challenge]").val())=='' || $.trim($("input[name=geetest_validate]").val())=='' || $.trim($("input[name=geetest_seccode]").val())=='') {

                $("#notice-msg").text('请先完成验证');

                return false;
            }

            var data = $("#form_login").serializeArray();

            $.post("{:url('admin/Index/login')}",data,function(data){

                if(data.code==1) {

                    window.location.href = data.jumpUrl;

                }else{

                    $("#notice-msg").text(data.msg);

                    refreshVertify();
                }

            },'json');
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
        captchaObj.appendTo("#captcha");
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
    };

    function login_submit_btn() {



    }


    function refreshVertify() {
        var src =  $("#form_vertify_img").attr("src");

        $("#form_vertify_img").attr("src",src+"?v="+Math.random());
    }
</script>
